<template lang="">
  <div class="content">
    <div class="main">
      <div class="search" style="border: 0px solid #000;height: auto;padding: 20px 0;background-color: #fff;">
        <el-row :gutter="10">
          <el-col :xs="24" :sm="24" :md="24" :lg="16" :xl="16">
            <div class="left" style="text-align: left;">
              <el-select v-model="staffStatus" placeholder="请选择员工状态" @input="staffStatusInput()" clearable>
                <el-option label="在职" value="在职"></el-option>
                <el-option label="离职" value="离职"></el-option>
              </el-select>
              <el-input suffix-icon="el-icon-search" v-model="realname" placeholder="请输入姓名包含的字符"
                @input="realnameInput()"
                style="height: 40px;width: 200px;border-radius: 50px;overflow: hidden;margin-left: 20px;">
              </el-input>
            </div>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <div class="right" style="text-align: right;">
              <el-button @click="goto" type="danger" class="button">创建</el-button>
              <el-button @click="deleteRow()" type="danger" class="button">删除</el-button>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="tabs">
        <el-table border ref="singleTable" highlight-current-row :data="userList" tooltip-effect="dark"
          style="width: 100%;cursor: pointer;" @row-click="rowClick" @row-dblclick="handleSelectionChange">
          <el-table-column type="index" width="55" label="序号" align="center">
          </el-table-column>
          <el-table-column prop="realname" label="姓名" width="120" show-overflow-tooltip>
            <template slot-scope="scope">
              <i class="el-icon-user" style="color:#161616;font-weight: 600;"></i>
              <span style="color:#161616;">
                {{ scope.row.realname }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="industry" label="专业" width="270" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="department" label="部门" width="150" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="position" label="职位" width="150" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="入职时间" width="150" align="center" show-overflow-tooltip>
            <template slot-scope="scope">

              <span style="margin-left: 10px">{{ scope.row.hiredate }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="positiveTime" label="转正时间" width="150" align="center" show-overflow-tooltip>
          </el-table-column>
          <!-- <el-table-column prop="departureTime" label="离职时间" width="130">
          </el-table-column> -->
          <el-table-column prop="staffStatus" label="状态" width="70" :formatter="stateFormat" align="center"
            show-overflow-tooltip>
          </el-table-column>

          <el-table-column prop="username" label="邮箱" width="300" show-overflow-tooltip>
            <template slot-scope="scope">
              <i class="el-icon-message" style="color: #fe0100;font-weight: 600;"></i>
              <span style="margin-left: 10px">{{ scope.row.username }}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="adress" label="地址" show-overflow-tooltip width="190">
          </el-table-column> -->
          <el-table-column label="联系电话" show-overflow-tooltip>
            <template slot-scope="scope">
              <i class="el-icon-mobile-phone" style="color: #fe0100;font-weight: 600;"></i>
              <span style="margin-left: 10px">{{ scope.row.phone }}</span>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination style="margin:20px;text-align: right;" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" :page-size="size" :page-sizes="[10, 20, 30]" :current-page="current"
          :total="total" layout="sizes,prev, pager, next">
        </el-pagination>
        <div style="margin-top: 20px">
          <!-- <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button> -->
          <!--<el-button style="width:120px" @click="setCurrent()">取消选择</el-button>-->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'staff',
    inject: ['reload'],
    data() {
      return {
        userList: [], //客户列表
        current: 1,
        size: 20,
        currentRow: null,
        itemkey: '',
        realname: '',
        total: 0,
        staffStatus: ''
      }
    },
    mounted() {
      this.getUserList()
    },
    methods: {
      setCurrent(row) {
        this.$refs.singleTable.setCurrentRow(row);
      },
      handleSizeChange(val) {
        // alert(`每页 ${val} 条`);
        this.size = val
        this.getUserList()
      },
      handleCurrentChange(val) {
        this.current = val
        this.getUserList()
      },
      stateFormat(row, column) {
        if (row.staffStatus == "在职") {
          return <i class="el-icon-success" style="color:#3CB371;"></i>
        } else if (row.staffStatus == "离职") {
          return <i class="el-icon-remove" style="color:#FF0000;"></i>
        }
      },

      rowClick(row) {
        this.currentRow = row
      },
      // 删除员工
      deleteRow() {
        if (this.currentRow == null) {
          this.$message("请选择一行进行删除操作");
        } else {
          this.$confirm("确认删除员工吗？", "提示", {
            confirmButtonText: "确认",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            var data = {
              userId: this.currentRow.userId
            }
            this.$API.user.deleteStaffy(data).then(res => {
              if (res.data.code == 200) {
                this.$message.success("删除成功！");
                this.getUserList()
              } else {
                this.$message.error("删除失败！");
              }
            })
          })
        }
      },
      // 搜索
      staffStatusInput() {
        this.getUserList()
      },
      // 获取员工列表
      async getUserList() {
        // 解构出参数
        const { current, size, userType, realname, staffStatus } = this;
        var data = {
          current: current,
          size: size,
          userType: "1"
        }
        if (realname != '') {
          data.realname = realname
        } else if (staffStatus != '') {
          data.staffStatus = staffStatus
        }
        let result = await this.$API.user.reqUserList(data)
        this.total = result.data.total;
        this.userList = result.data.data
      },
      realnameInput() {
        this.getUserList()
      },
      goto() {
        this.$router.push({
          path: '/InsertStaff'
        });
      },
      handleSelectionChange(val) {
        console.log(val)
        this.currentRow = val;
        this.$router.push({
          path: '/staff/detail',
          name: 'staffDetail',
          query: {
            userId: this.currentRow.userId,
          }
        });
      }
    }
  }

</script>
<style scoped>
  @import "../../../style/style.css";

  .main {
    border: 0px solid #000;
    border-radius: 10px;
    overflow: hidden;
  }

  .search .left {
    padding-left: 20px;
  }

  .search .left>>>.el-select .el-input {
    background-color: #f5f5f7;
    width: 200px;
    margin-left: 20px;
    border-radius: 50px;
    overflow: hidden;
    height: 40px;
  }

  .search .left>>>.el-input__icon {
    color: #000;
    font-weight: 600;
  }

  .search .left>>>.el-select .el-input .el-select__caret {
    color: #000;
  }

  .search .right {
    padding-right: 40px;
  }

  .search>>>.el-input__inner {
    background-color: #f5f5f7;
  }
</style>